<template>
   <div class="linel">
      <div id="linel" style="width: 90%;height:320px;"></div>
  </div>  
</template>

<script>
 // 引入 echarts 主模块。
    import * as echarts from 'echarts/lib/echarts';
    // 引入折线图。
    import 'echarts/lib/chart/line';
    import 'echarts/lib/chart/bar';
    // 引入提示框组件、标题组件、工具箱组件。
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/toolbox';
     import 'echarts/lib/component/legend';
    import 'echarts/lib/component/markPoint';
    
export default {
  data() {
    return {
    };
  },
   mounted(){
          this.myChart=echarts.init(document.getElementById("linel"))
          this.initData();
        },
        methods:{
           initData(){
              const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['邮件营销','搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 310, name: '邮件营销'},                          
                            {value: 1548, name: '搜索引擎'}
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
           } 
        }
};

</script>

<style lang="scss" scoped>
.status {
  width: 100%;
  height: 320px;
  border: 1px solid white;
}
.rate {
  width: 100%;
  height: 180px;
  // background:red;
  .strip {
    display: flex;
    color: white;
    padding: 0 20px;
    font-size: 12px;
    box-sizing: border-box;
    align-items: center;
    > p:first-of-type {
      width: 50px;
    }
    > p:last-of-type {
      width: 70px;
    }
    > div {
      // width:100%;
      // height:auto;
      border: 1px solid #fa106d;
      flex: 1;
      height: 15px;
      margin: 0 5px;
      position: relative;
      box-sizing: border-box;
      border-radius: 0 5px 5px 0;

      > div {
        background: linear-gradient(to right, #121130 10%, #fa106d 60%);
        width: 90%;
        height: 15px;
        border-radius: 0 5px 5px 0;
        position: absolute;
        top: -1px;
        left: -1px;
      }
    }
  }
}

</style>